<template>
  <div class="baseContainer">
    <div style="margin-bottom:15px">
      <el-button type="primary"  @click="addUserDialog">添加用户</el-button>
    </div>
    <div class="baseBoderShadow bgWhite baseBorderRadius" style="min-height:690px">
        <div style="padding:30px">
          <div style="padding-bottom:20px" v-if="!linkRoleId">
            <el-input v-model.trim="seachName" placeholder="请输入用户名" clearable style="width:300px" suffix-icon="el-icon-search">  
            </el-input>
            <el-button type="warning"  @click="seachBtn">搜索</el-button>
          </div>
          <table class="special_table" width="100%">
            <thead>
              <tr>
                <td >帐号</td>
                <td >用户名</td>
                <td>角色</td>
                <td style="width:120px">启用/禁用</td>
                <td style="width:250px">操作</td>
              </tr>
            </thead>
            <tbody>
              <template v-if="tableData.length">
                <tr v-for="(item, index) in tableData" :key="index">
                  <td >{{ item.userCode||'-' }}</td>
                  <td >{{ item.userName||'-' }}</td>
                  <td>
                    <template v-if="item.roleList.length">
                        <span class="userName" v-for="(i,index) in item.roleList" :key="index+i">{{i.roleName}}</span>
                    </template>
                    <template v-else> - </template>
                  </td>
                  <td style="width:100px" class="switchBox">
                    <el-switch width="60"
                        v-model="item.switchValue" active-text="启用" 
                        inactive-text="禁用"
                         active-color="#13ce66"  inactive-color="#b8bec9" @change="changeSwichBtn(item)">
                    </el-switch>
                  </td>
                  <td style="width:250px">
                     <el-button  size="mini" round  type="warning" @click="editRole(item)">编辑</el-button>
                      <el-button  class="btnBlue"  size="mini" round  type="primary" @click="resetPassword(item.id)">重置</el-button>
                  </td>
                </tr>
              </template>
              <template v-else>
                <tr>
                  <td colspan="6">暂无数据</td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
        <div style="padding:25px;text-align: center;">
          <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 编辑角色 -->
        <el-dialog :visible.sync="dialogVisible" title="编辑角色" width="500px">
          <div style="min-height:120px">
            <div style="margin-bottom:35px">
              <span class="titleName">基本角色:</span>
              <el-select style="width:350px" v-model="value_user" multiple placeholder="请选择">
                <el-option v-for="item in options_user" :key="item.id" :label="item.roleName" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div style="padding-left:75px">
              <el-button type="primary"  @click="submit">确定</el-button>
              <el-button @click="dialogVisible=false">取消</el-button>
            </div>
          </div>
        </el-dialog>

        <!-- 添加用户 -->
        <el-dialog :visible.sync="dialogVisible_addUser" title="添加用户" width="500px">
          <div style="min-height:120px">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="账号">
                <el-input v-model.trim="form.userCode" />
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model.trim="form.userName" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input type="password" v-model.trim="form.pass" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div style="padding-left:80px">
              <el-button type="primary"  @click="addUser">确定</el-button>
              <el-button  @click="dialogVisible_addUser=false">取消</el-button>
            </div>
          </div>
        </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      seachName: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      dialogVisible: false,
      form: {
        userCode: "",
        userName: "",
        pass: ""
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      tree_data: [],
      dialogVisible_sq: false,
      checkedKeys: [],
      roleId: 0,
      options_user: [],
      value_user: [],
      nowId: 0,
      dialogVisible_addUser: false,
      linkRoleId: 0
    };
  },
  watch: {},
  mounted() {
    if (this.$route.query && this.$route.query.roleId) {
      this.linkRoleId = this.$route.query.roleId;
    }
    this.roleList();
  },
  methods: {
    /**
     * @name findZsList
     * @description 宿舍查询-搜索
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async roleList() {
      let data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        userName: this.seachName // 入学年级ID
      };
      if (this.linkRoleId) {
        Object.assign(data, {
          roleId: this.linkRoleId
        });
      }
      const res = await this.$store.dispatch("qxgl-yhgl/findList", data);
      res.data.list.map(item=>{
        item.status==1?item.switchValue=true:item.switchValue=false
      })
      this.tableData = res.data.list;
      this.totalPage = res.data.total;
      this.sysRole();
    },
    /**
     * @name  handleCurrentChange handleSizeChange
     * @description 分页
     * @author wqy
     * @date 2019-09-16 15:45:04
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.roleList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.roleList();
    },
    /**
     * @name seachBtn
     * @description 输入关键字查询
     * @author wqy
     * @date 2019-09-16 15:20:17
     */
    seachBtn() {
      this.currentPage = 1;
      this.roleList();
    },
    changeSwichBtn(item){
      if(item.status==1){
        this.disableGetBtn(item.id)
      }else{
         this.enablegetBtn(item.id)
      }
    },
    /**
     * @name enablegetBtn
     * @description 启用
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async enablegetBtn(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/enableGet", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "启用成功!",
          type: "success"
        });
        this.roleList();
      }
    },
    /**
     * @name disableGetBtn
     * @description 禁用
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async disableGetBtn(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/disableGet", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "禁用成功!",
          type: "success"
        });
        this.currentPage = 1;
        this.roleList();
      }
    },
    /**
     * @name resetPassword
     * @description 重设密码
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    resetPassword(id) {
      this.$confirm("您确定要重置密码吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.resetPasswordAjax(id);
        })
        .catch(() => {});
    },
    async resetPasswordAjax(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/resetPassword", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "重设密码成功!",
          type: "success"
        });
        this.roleList();
      }
    },
    /**
     * @name sysRole
     * @description 获取所有的角色
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async sysRole() {
      const res = await this.$store.dispatch("qxgl-yhgl/sysRoleAll");
      if (res.status == 1000) {
        this.options_user = res.data;
      }
    },
    /**
     * @name editRole
     * @description 编辑角色
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    editRole(item) {
      this.value_user = [];
      this.nowId = item.id;
      for (let item of item.roleList) {
        this.value_user.push(item.id);
      }
      this.dialogVisible = true;
    },
    /**
     * @name submit
     * @description 编辑角色-确定按钮
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async submit() {
      if (!this.value_user.length) {
        this.$message({
          message: "请选择基本角色!",
          type: "warning"
        });
        return;
      }
      let roleListId = "";
      for (let item of this.value_user) {
        roleListId += item + ",";
      }
      let reg = /,$/gi;
      roleListId = roleListId.replace(reg, "");
      const res = await this.$store.dispatch("qxgl-yhgl/assign", {
        id: this.nowId,
        roleIds: roleListId
      });
      if (res.status == 1000) {
        this.$message({
          message: "编辑成功!",
          type: "success"
        });
        this.dialogVisible = false;
        this.roleList();
      }
    },
    addUserDialog() {
      this.form = {
        userCode: "",
        userName: "",
        pass: ""
      };
      this.dialogVisible_addUser = true;
    },
    /**
     * @name addUser
     * @description 添加用户
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async addUser() {
      if (this.form.userCode.length == 0) {
        this.$message({
          message: "请输入账号!",
          type: "warning"
        });
        return;
      }
      if (this.form.userName.length == 0) {
        this.$message({
          message: "请输入用户名!",
          type: "warning"
        });
        return;
      }
      if (this.form.pass.length < 6) {
        this.$message({
          message: "密码长度不能小于6个字符!",
          type: "warning"
        });
        return;
      }
      if (this.form.pass.length > 10) {
        this.$message({
          message: "密码长度不能大于10个字符!",
          type: "warning"
        });
        return;
      }
      const res = await this.$store.dispatch("qxgl-yhgl/addUser", {
        userCode: this.form.userCode,
        userName: this.form.userName,
        password: this.form.pass
      });
      if (res.status == 1000) {
        this.$message({
          message: "添加用户成功!",
          type: "success"
        });
        this.dialogVisible_addUser = false;
        this.currentPage = 1;
        this.pageSize = 10;
        this.roleList();
      }
    },
    /**
     * @name deleteRole
     * @description 删除用户
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    deleteTip(id) {
      this.$confirm("您确定要删除用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteUser(id);
        })
        .catch(() => {});
    },
    async deleteUser(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/deleteUser", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "删除成功!",
          type: "success"
        });
        this.roleList();
      }
    }
  }
};
</script>
<style  scoped>
h5,
p,
ul,
img {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  *zoom: 1;
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}

li {
  list-style-type: none;
}
.qxgl {
  padding: 15px;
}
.zsHistory .iconfont {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.blue {
  color: #6bc5ff;
  cursor: pointer;
}
.greey {
  color: #aaafb3;
}
.greey:hover {
  color: #eb9616;
}
.addBtn {
  display: inline-block;
  margin-right: 20px;
  color: #409eff;
  background: #ecf5ff;
  border: 1px solid;
  border-color: #b3d8ff;
  padding: 6px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.addBtn:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.treeBox {
  height: 350px;
  overflow-y: scroll;
}
.userName {
  padding-right: 10px;
  display: inline-block;
}
.titleName {
  line-height: 36px;
  padding-right: 15px;
}
.padding20 {
  padding-top: 20px
}
</style>
